<script setup>

  import { computed, reactive, ref, unref } from 'vue';

  import {
    onReachBottom, onLoad,
  } from '@dcloudio/uni-app';
  import businessScrollList from '@/sheep/businessCom/business-scroll-list.vue';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import sheep from '@/sheep';
  import rankingHotItem from '@/sheep/businessCom/pages/ranking-hot-item.vue';
  import SpuApi from '@/sheep/api/product/spu';
  import { fen2yuan } from '../../sheep/hooks/useGoods';


  const src = ref('https://www.zhangfkj.cn/zfkj/14_a936f483-43a4-4f53-989b-94b6a1feb91bWechatIMG126.png');

  // 隐藏原生tabBar
  uni.hideTabBar();

  const template = computed(() => sheep.$store('app').template?.home);
  const history = computed(() => sheep.$store('category').search?.history);
  const like = computed(() => sheep.$store('category').search?.suggest);

  console.log(history.value, 'history');
  const state = reactive({
    showHistory: true,
    search: '',
    searchParam: {
      keyword: '',
    },
    hotList: [],
  });

  function search(value, hasSetSearch = false) {
    const inputStr = value.replace(/\s+/g, '');
    sheep.$store('category').addHistory(inputStr);
    state.searchParam.keyword = inputStr;
    if (hasSetSearch) {
      state.search = inputStr;
    }
    state.showHistory = false;
  }

  function clear() {
    sheep.$store('category').setHistory([]);
  }

  async function initHot() {
    const { code, data } = await SpuApi.getPointList({
      pageNo: 1,
      pageSize: 10,
      name: '热销榜单',
    });
    if (code === 0) {
      state.hotList = data.list;
    }
  }

  onLoad(() => {
    initHot();
  });
  // #ifdef H5
  const navbar = 'none';
  // #endif
  // #ifdef MP
  const navbar = 'custom';
  // #endif
  onReachBottom(() => {
    console.log('到底了');
    uni.$emit('onReachBottom');
  });
</script>

<template>
  <s-layout title="首页" :navbar="navbar" :bgStyle="template.page"
            :navbarStyle="template.navigationBar" onShareAppMessage>
    <view class=" uno-relative " style="padding-top: 100rpx">
      <view class="uno-bg-white uno-p3 uno-absolute uno-h-100 uno-w-[100%] uno-box-border"
            style="top: 0;left: 0; z-index: 10">
        <up-search :show-action="true" placeholder="请输入商品关键字" actionText="搜索"
                   v-model="state.search"
                   @focus="state.showHistory = true"
                   @custom="search"
                   @search="search"
        ></up-search>
      </view>
      <view v-if="state.showHistory" class="search uno-p2">
        <view>
          <view class="search-history">
            <view class="uno-flex uno-justify-between">
              <text class="uno-font-bold">搜索历史</text>
              <text @click="clear">清空</text>
            </view>
            <view class="uno-flex uno-flex-wrap uno-pt2 uno-pb2"
                  style="min-height: 50rpx"
            >
              <view class="uno-pt1 uno-pb1 uno-pl2 uno-pr2 uno-bg-#e5e5e5 uno-border-rd-20 uno-m1"

                    v-for="item in history"
                    @click="search(item,true)"
              >{{ item }}
              </view>
            </view>
          </view>
          <view class="like">
            <view class="uno-font-bold">猜你想搜</view>
            <view class="uno-flex uno-flex-wrap uno-pt2 uno-pb2">
              <view class="uno-pt1 uno-pb1 uno-pl2 uno-pr2 uno-bg-#e5e5e5 uno-border-rd-20 uno-m1"
                    v-for="item in like"
                    @click="search(item.searchTerm,true)"
              >{{ item.searchTerm }}
              </view>
            </view>
          </view>
        </view>

        <view>
          <view>
            <up-image
              src="http://47.105.84.194:9000/zfkj/42dc77e6cb066659f2bc9c8426a252b89bf26055a5a94676ed53efaa7eff02d8.png"
              width="300rpx"
              style="margin-top:20rpx" height="90rpx"></up-image>
          </view>
          <view class="uno-bg-white uno-p2 uno-font-bold uno-border-rd-lg">
            <view
              v-for="(item,index) in state.hotList"
              @click="sheep.$router.go('/pages/goods/index',{id:item.id})"
            >
              <view class="uno-flex uno-justify-between uno-items-center uno-pt2 uno-pb2">
                <view class="uno-flex uno-items-center">
                  <view class="uno-color-orange uno-pl2 uno-pr2">{{ index + 1 }}</view>
                  <view class="uno-flex-grow ">
                    <up-text :text="item.name" bold lines="1"></up-text>
                  </view>
                </view>
                <view class="uno-w-100 uno-text-right">
                  <view v-if="index === 0">
                    <text class="uno-color-white uno-bg-#f84101" style="font-size: 20rpx;">爆</text>
                  </view>
                  <view v-if="index === 1">
                    <text class="uno-color-white uno-bg-#fa5700" style="font-size: 20rpx;">热</text>
                  </view>
                  <view v-if="index === 2">

                    <text class="uno-color-white uno-bg-#ffc600" style="font-size: 20rpx;">新</text>
                  </view>
                </view>

              </view>
            </view>
          </view>
        </view>
      </view>

      <view v-if="!state.showHistory" class="uno-p-2">
        <businessScrollList :get-api="'getSpuPage'" :params="state.searchParam" :col="1">
          <template #default="{item ,index}">
            <!--            <rankingHotItem :model-value="item" :index="index"-->
            <!--                            @click="sheep.$router.go('/pages/goods/index',{id:item.id})"></rankingHotItem>-->
            <view class="uno-flex uno-flex-col uno-w-[100%] uno-bg-white uno-p2 uno-box-border">
              <view class="uno-flex uno-w[100%]">
                <view class="uno-flex">
                  <up-image :src="item.picUrl" width="200rpx" height="200rpx"></up-image>
                </view>
                <view class="uno-flex uno-flex-col uno-ml2 uno-flex-grow uno-flex-justify-between">

                  <view>
                    <up-text :text="item.name" lines="2" size="30rpx"></up-text>
                  </view>

                  <view class="uno-flex uno-flex-justify-between  uno-items-center">
                    <view class="uno-color-red uno-flex uno-flex-justify-between  uno-items-center">
                      <text style="font-size: 35rpx">{{ item.points }}积分</text>
<!--                      <text>+{{ fen2yuan( item.price || '')}}元</text>-->
                    </view>
                    <view class="uno-flex">
                      仅剩
                      <text class="uno-color-red">{{ item.stock }}</text>
                      件
                    </view>
                  </view>
                  <view style="text-decoration: line-through;color: #888;">
                    ￥{{ fen2yuan( item.marketPrice|| '') }}
                  </view>
                </view>
              </view>
              <view class="uno-flex uno-justify-end uno-bg-#eeeeee uno-border-rd-30rpx uno-m1 uno-h60 uno-mt2 uno-mb2">
                <view
                  class="uno-flex uno-justify-center uno-items-center uno-bg-red uno-color-white uno-border-rd-30rpx  uno-w140 uno-p1">
                  立即抢购
                </view>
              </view>
            </view>

          </template>
        </businessScrollList>

      </view>


      <view class="uno-fixed uno-bg-white uno-h120 uno-flex uno-justify-center uno-items-center" style="bottom: 0;z-index: 10;width: 100%; left: 0;position: fixed">
        <view class="uno-flex uno-justify-center uno-items-center uno-bg-#da4944 uno-color-white uno-w-[80%] uno-p2 uno-border-rd-30rpx"
        @click="sheep.$router.go('/pages/index/index')"
        >
          返回首页
        </view>
      </view>
    </view>
  </s-layout>
</template>

<style scoped lang="scss">
  :deep(.page-body) {
    background: #f5f5f5 !important;
  }

  .header {
    position: relative;
    height: 350rpx;
  }
</style>